<template>
  <form-drawer ref="formDrawerRef" title="下载合同" @submit="handleSubmit">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
      <template v-for="item in configList" :key="item.value">
        <el-form-item v-if="item.types === 'input'" :label="item.label" :prop="item.value"
          ><el-input
            v-model="form[item.value]"
            :type="item.type"
            :min="item.min"
            :placeholder="item.placeholder"
            :maxlength="item.maxlength"
          >
            <template #append v-if="item.unit">{{ item.unit }}</template></el-input
          >
        </el-form-item>
        <el-form-item v-else-if="item.types === 'select'" :label="item.label" :prop="item.value"
          ><el-select v-model="form[item.value]" :placeholder="item.placeholder">
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option> </el-select
        ></el-form-item>
        <el-form-item
          v-else-if="
            item.types === 'inputSelect' &&
            item.includeLabel &&
            item.includeValue.includes(form[item.includeLabel])
          "
          :label="item.label"
          :prop="item.value"
          ><el-input
            v-model="form[item.value]"
            :type="item.type"
            :placeholder="item.placeholder"
            :maxlength="item.maxlength"
        /></el-form-item>
        <el-form-item v-else-if="item.types === 'date'" :label="item.label" :prop="item.value">
          <el-date-picker
            v-model="form[item.value]"
            :placeholder="item.placeholder"
            :type="item.type"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
      </template>
    </el-form>
  </form-drawer>
</template>
<script setup lang="ts">
import { ref } from "vue";
import useDown from "@/hooks/useDown";
import { useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { isPositiveNumber, isIntegerNumber } from "@/utils/regular";
import { downLoadSecondContractApi, getSecondContractInfoApi } from "@/api/second";

const configList = ref([
  {
    types: "input",
    label: "车身颜色",
    value: "carColor",
    placeholder: "请输入车身颜色",
    type: "text",
    maxlength: 10,
    min: 1
  },
  {
    types: "date",
    label: "注册登记日期",
    value: "registerDate",
    placeholder: "请选择注册登记日期",
    type: "date"
  },
  {
    types: "input",
    label: "合同签订地点",
    value: "signAddress",
    placeholder: "请输入合同签订地点",
    maxlength: 50,
    type: "text",
    min: 1
  },
  {
    types: "input",
    label: "预计维修总金额",
    value: "totalAmount",
    placeholder: "请输入预计维修总金额",
    maxlength: 10,
    type: "number",
    min: 1
  },
  {
    types: "input",
    label: "预计工时费",
    value: "hourAmount",
    placeholder: "请输入预计工时费",
    maxlength: 10,
    type: "number",
    min: 1
  },
  {
    types: "input",
    label: "材料费用",
    value: "productAmount",
    placeholder: "请输入材料费用",
    maxlength: 10,
    type: "number",
    min: 1
  },
  {
    types: "input",
    label: "托修方预付金额",
    value: "preAmount",
    placeholder: "请输入托修方预付金额",
    maxlength: 10,
    type: "number",
    min: 1
  },
  {
    types: "select",
    label: "结算方式",
    value: "settleWay",
    placeholder: "请选择结算方式",
    options: [
      {
        label: "接车时现金支付",
        value: 1
      },
      {
        label: "银行转账",
        value: 2
      },
      {
        label: "其他",
        value: 3
      }
    ]
  },
  {
    types: "inputSelect",
    label: "其他结算方式",
    value: "otherSettleWay",
    placeholder: "请输入其他结算方式",
    maxlength: 20,
    includeLabel: "settleWay",
    includeValue: [3]
  },
  {
    types: "input",
    label: "结算期限",
    value: "settlePeriod",
    placeholder: "请输入结算期限",
    maxlength: 3,
    type: "number",
    min: 1,
    unit: "天"
  },
  {
    types: "input",
    label: "违约金额占比",
    value: "deditPercent",
    placeholder: "请输入违约金额占比",
    maxlength: 3,
    type: "number",
    min: 1,
    unit: "%"
  },
  {
    types: "input",
    label: "托修方验收天数",
    value: "acceptDeadline",
    placeholder: "请输入托修方验收天数",
    maxlength: 20,
    type: "number",
    min: 1,
    unit: "天"
  },
  {
    types: "select",
    label: "争议解决方式 ",
    value: "disputeSolveWay",
    placeholder: "请选择争议解决方式",
    options: [
      {
        label: "向仲裁委员会申请仲裁 ",
        value: 1
      },
      {
        label: "向人民法院起诉",
        value: 2
      }
    ]
  },
  {
    types: "input",
    label: "其他条款",
    value: "otherClause",
    placeholder: "请输入其他条款",
    maxlength: 500,
    type: "textarea"
  }
]);
const { downloadFile } = useDown();
// 下载合同
let { formDrawerRef, formRef, form, rules, handleCreate, handleSubmit } = useInitForm({
  isNotTips: true,
  form: {
    recordId: "",
    carColor: "",
    registerDate: "",
    signAddress: "",
    totalAmount: "",
    hourAmount: "",
    productAmount: "",
    preAmount: "",
    settleWay: "",
    otherSettleWay: "",
    settlePeriod: "",
    deditPercent: "",
    acceptDeadline: "",
    disputeSolveWay: "",
    otherClause: ""
  },
  rules: {
    carColor: [{ required: true, message: "请输入车身颜色", trigger: "blur" }],
    registerDate: [{ required: true, message: "请选择注册登记日期", trigger: "change" }],
    signAddress: [{ required: true, message: "请输入合同签订地点", trigger: "blur" }],
    totalAmount: [
      { required: true, message: "请输入预计维修总金额", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isPositiveNumber(value)) {
            callback(new Error("请输入正确的金额"));
          } else {
            callback();
          }
        }
      }
    ],
    hourAmount: [
      { required: true, message: "请输入预计工时费", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isPositiveNumber(value)) {
            callback(new Error("请输入正确的工时费"));
          } else {
            callback();
          }
        }
      }
    ],
    productAmount: [
      { required: true, message: "请输入材料费用", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isPositiveNumber(value)) {
            callback(new Error("请输入正确的材料费用"));
          } else {
            callback();
          }
        }
      }
    ],
    preAmount: [
      { required: true, message: "请输入托修方预付金额", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isPositiveNumber(value)) {
            callback(new Error("请输入正确的预付金额"));
          } else {
            callback();
          }
        }
      }
    ],
    settleWay: [{ required: true, message: "请选择结算方式", trigger: "change" }],
    otherSettleWay: [{ required: true, message: "请输入其他结算方式", trigger: "blur" }],
    settlePeriod: [
      { required: true, message: "请输入结算期限", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isIntegerNumber(value)) {
            callback(new Error("请输入正确的结算期限"));
          } else {
            callback();
          }
        }
      }
    ],
    deditPercent: [
      { required: true, message: "请输入违约金额占比", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isPositiveNumber(value)) {
            callback(new Error("请输入正确的违约金额占比"));
          } else {
            callback();
          }
        }
      }
    ],
    acceptDeadline: [
      { required: true, message: "请输入托修方验收天数", trigger: "blur" },
      {
        validator: (rule: any, value: string, callback: any) => {
          if (!isIntegerNumber(value)) {
            callback(new Error("请输入正确的验收天数"));
          } else {
            callback();
          }
        }
      }
    ],
    disputeSolveWay: [{ required: true, message: "请选择争议解决方式", trigger: "change" }]
  },
  createData: downLoadSecondContractApi,
  success: (res: any) => {
    downloadFile(res, "维修合同.doc");
  }
});

const handleOpen = async (recordId: number) => {
  handleCreate();//清空表单
  form.recordId = recordId;
  handleGetContractInfo(recordId);
};

// 获取合同信息
const handleGetContractInfo = async (recordId: number) => {
  const res: any = await getSecondContractInfoApi({
    recordId
  });
  if (res) {
    Object.keys(form).forEach((key: string) => {
      form[key] = res[key];
    });
  }
};
defineExpose({
  handleOpen
});
</script>
<style scoped lang="scss"></style>
